<template>
  <div class="container " 
  :class="{'right-panel-active':flag_right_panel_active}" 
  :style="{top:wintop,left:winleft}">
    <div class="container_from container--signup">
        <form action="#" class="from" id="from1">
            <h2 class="fromtitle">注册账号</h2>
            <input type="text" placeholder="Account" class="input" v-model="register.account">
            <input type="text" placeholder="Username" class="input" v-model="register.username">
            <input type="email" placeholder="Email" class="input" v-model="register.email">
            <input type="password" placeholder="Password" class="input" v-model="register.password">
            <button class="btn" @click="registerBtn" id="resgiter">注册</button>
            
        </form>
        <div class="tips">
            <span class="text" :class="{'tipdisplay':Restip}">{{tips}}</span>  
        </div>
    </div>
    <!-- 登录 -->
    <div class="container_from container--signin">
        <div action="#" class="from" id="from2">
            <h2 class="fromtitle">欢迎登录</h2>
            <input type="text" placeholder="Account" class="input" v-model="login.account">
            <input type="password" placeholder="Password" class="input" v-model="login.password">
            <button class="btn" id="login" @click="loginBtn">登录</button>
            <a href="#" class="link" @click="GotoFind">忘记密码？</a>
        </div>
        <div class="tips1">
            <span class="text" :class="{'tipdisplay':Logintip}" >{{tips}}</span>  
        </div>
    </div>
    <div class="container_overlay">
        <div class="overlay">
            <div class="overlay_panel overlay--left">
                <button class="btn" id="signin" @click="Signin">已有账号，直接登录</button>
            </div>
            <div class="overlay_panel overlay--right">
                <button class="btn" id="signup" @click="Signup">没有账号，点击注册</button>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'LoginChat',
    data() {
        return {
            flag_right_panel_active:true,
            register:{
                account:'',
                username:'',
                email:'',
                password:''
            },
            login:{
                account:'',
                password:''
            },
            Restip:false,
            tips:'',
            Logintip:false,
            LoginInfo:{//传递给聊天界面的用户信息
                account:'',
                Name:'',
                info:['hello','123']
            }
        }
    },
    methods: {
        Signin(){
            this.flag_right_panel_active=false
        },
        Signup(){
            this.flag_right_panel_active=true
        },
        GotoFind(){
            this.$router.push({
                path:'/findpwd'
            })
        },
        GotoMain(){
            // this.LoginInfo.account = this.login.account
            // this.LoginInfo.Name = this.login.name
            this.$router.push({
                path:`/main/${this.login.account}`
            })
        },
        registerBtn(){
            var data = {"account":this.register.account,
                        "name":this.register.username,
                        "email":this.register.email,
                        "password":this.register.password
            }
            axios.post('/register',data,{
                            headers: {
                                'Content-Type':'application/json; charset=UTF-8;'
                            }
                        }
                ).then(res =>{
                var result = res.data
                this.tips=result.message
                this.Restip= true
                setTimeout(()=>{
                    this.Restip= false
                }, 5000);
            }).catch(err=>{
                this.tips=err.response.data.message
                this.Restip= true
                setTimeout(() =>{
                    this.Restip= false
                }, 5000);
            })
        },
        loginBtn(){
            // post请求
            var data = {"account":this.login.account,
                        "password":this.login.password
            }
            axios.post('/login',data,{
                            headers: {
                                'Content-Type':'application/json; charset=UTF-8;'
                            }
                        }
                ).then(res =>{
                var result = res.data
                this.tips=result.message
                this.Logintip= true
                setTimeout(()=>{
                    this.Logintip= false
                    this.GotoMain()
                }, 2000);
            }).catch(err=>{
                this.tips=err.response.data.message
                this.Logintip= true
                setTimeout(() =>{
                    this.Logintip= false
                }, 5000);
            })
            //测试用来直接跳转
            // this.GotoMain()
        }
    },
    computed:{
        wintop(){
            return (window.innerHeight-50-500)/2+'px'
        },
        winleft(){
            return (window.innerWidth-30-500)/2+'px'
        }
    }
    
  
    
    
}
</script>

<style scoped>
.from_title {
    font-weight: 300;
    margin: 0;
    margin-bottom: 1.25rem;
}
.link {
    color: #333;
    font-size: 0.9rem;
    margin-top: 20px;
    text-decoration: none;
}
.link:hover {
    color: #a1b223;
}
.container {
    background-color: white;
    border-radius: 0.7rem;
    box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.2);
    height: 500px;
    max-width: 500px;
    overflow: hidden;
    position: absolute;
    width: 500px;
}
.container_from {
    height: 500px;
    position: absolute;
    top: 0;
    transition: all 0.6s ease-in-out;
}
.container--signin {
    left: 0;
    width: 250px;
    z-index: 2;
}
.container.right-panel-active .container--signin {
    transform: translateX(100%);
}
.container--signup {
    left: 0;
    opacity: 0;
    width: 250px;
    z-index: 1;
}
.container.right-panel-active .container--signup {
    animation: show 0.6s;
    opacity: 1;
    transform: translateX(100%);
    z-index: 5;
}
.container_overlay {
    height: 500px;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: transform 0.6s ease-in-out;
    width: 250px;
    z-index: 100
}
.container.right-panel-active .container_overlay {
    transform: translateX(-100%);
}
.overlay {
    background-color: #008997;
    background: url(../Images/background.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    left: -100%;
    position: relative;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    width: 200%;
}
.container.right-panel-active .overlay {
    transform: translate(50%);
}
.overlay_panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    width: 50%;
}
.overlay--left {
    transform: translateX(-20%);
}
.container.right-panel-active .overlay--left {
    transform: translateX(0);
}
.overlay--right {
    right: 0;
    transform: translateX(0);
}
.container.right-panel-active .overlay--right {
    transform: translateX(20%);
}
.btn {
    width: 150px;
    height: 50px;
    background-color: skyblue;
    background-image: linear-gradient(90deg, skyblue 0%, #008997 74%);
    border-radius: 15px;
    border: 1px solid skyblue;
    color: #e9e9e9;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    /* padding: 0.9rem 4rem; */
    text-transform: uppercase;
    transition: transform 80ms ease-in
}
#login,
#resgiter {
    margin-top: 30px;
    font-size: 20px;
}
/* .form>.btn {
    margin-top: 1.5rem;
} */
.btn:active {
    transform: scale(0.95);
}
.btn:focus {
    outline: none;
}
.from {
    background-color: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: column; 
    padding: 0 3rem;
    height: 450px;
    text-align: center;

}
.input {
    background-color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.9rem 0.9rem;
    margin: 0.5rem 0;
    width: 100%;
}
@keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 1;
    }
    50%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}
.tips{
    width: 250px;
    height: 50px;
    color: red;
    cursor: pointer;
    float: left;
    background-color: #e9e9e9;
    border-bottom-right-radius: 0.7rem;
}
.tips1{
    width: 250px;
    height: 50px;
    color: red;
    cursor: pointer;
    float: left;
    background-color: #e9e9e9;
    border-bottom-left-radius: 0.7rem;
}
.text{
    text-align: center;
    display: none;
}
.tipdisplay{
    display: block;
}
</style>